<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./base.css">
    <style>
        /*input框相关样式*/
        .boxInput {
            display: flex;
            width: 206px;
            position: relative;
        }

        .boxInput .input {
            height: 35px;
            width: 100%;
            display: flex;
            line-height: 35px;
            border-radius: 8px;
            border: 1px solid rgb(192, 196, 204, .7);
            cursor: pointer;
            opacity: 0.8;
            font-size: 14px;
            outline: none;
        }

        .boxInput #icon {
            height: 15px;
            line-height: 15px;
            position: absolute;
            right: 12px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            transition: 0.3s;
            cursor: pointer;
            user-select: none;
        }


        .parentDom1 {
            border-left: 1px solid rgba(0, 0, 0, .3) !important;
        }

        /* 公共样式*/
        /*大盒子相关样式*/
        .parentDomBox {
            display: flex;
            margin-top: 10px;
            margin-left: 10px;
            /*width: 800px;*/
            /* display: none; */

        }

        /*ul相关的公共样式*/
        /*装ul的盒子的公共样式*/
        .parentDomBox .parentULDom {
            position: relative;
            width: 180px;
            /*height: 200px;*/
            transition: 0.1s;
            font-size: 15px;
            border-radius: 5px;
            color: rgba(0, 0, 0, .7);
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .3);
            border-left: none;
            /* display: none; */

        }

        /*ul的公共样式*/
        .parentDomBox .parentULDom .province {
            width: 100%;
            position: absolute;
            /* user-select: none; */
            /* display: none; */
            /*background-color: rgba(255,0,0,.3);*/

        }

        /*li的公共样式*/
        .parentDomBox .parentULDom .province li {
            height: 40px;
            padding-left: 25px;
            line-height: 40px;
            cursor: pointer;
            position: relative;
            font-size: 14px;
            user-select: none;
        }

        /*li里面的矢量图的公共样式*/
        .parentDomBox .parentULDom .province li span {
            font-size: 12px;
            font-weight: bold;
            position: absolute;
            right: 18px;
        }

        /*li里面的矢量图的公共样式*/
        .parentDomBox .parentULDom .province li:hover {
            background-color: rgba(245, 247, 250);
        }

        /*第一个和最后一个有空隙*/
        .parentDomBox .parentULDom .province li:first-child {
            margin-top: 8px;
        }

        .parentDomBox .parentULDom .province li:last-child {
            margin-bottom: 8px;
        }

        /*滚动条相关公共样式*/
        .parentDomBox .parentULDom .scrollBar {
            background-color: rgb(221, 222, 224);
            width: 5px;
            height: 40px;
            top: 0;
            position: absolute;
            right: 4px;
            left: 170px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 99;
            display: none;
        }

        /*单独样式*/
        /*滚动条单独样式*/
        /*scrollBar1*/
        .parentDomBox .parentDom1:hover .scrollBar1 {
            display: block;
        }

        .parentDomBox .parentDom1 .scrollBar1:hover {
            background-color: rgb(199, 200, 203);
        }

        .parentDomBox .parentDom1 .scrollBar1:active {
            background-color: rgb(221, 222, 224);
            display: block;
        }


        /*scrollBar2*/


        .parentDomBox .parentDom2:hover .scrollBar2 {
            display: block;
        }

        .parentDomBox .parentDom2 .scrollBar2:hover {
            background-color: rgb(199, 200, 203);
        }

        .parentDomBox .parentDom2 .scrollBar2:active {
            background-color: rgb(221, 222, 224);
            display: block;
        }

        /*scrollBar3*/
        .parentDomBox .parentDom3:hover .scrollBar3 {
            display: block;
        }

        .parentDomBox .parentDom3 .scrollBar3:hover {
            background-color: rgb(199, 200, 203);
        }

        .parentDomBox .parentDom3 .scrollBar3:active {
            background-color: rgb(221, 222, 224);
            display: block;
        }

        /*scrollBar4*/
        .parentDomBox .parentDom4:hover .scrollBar4 {
            display: block;
        }

        .parentDomBox .parentDom4 .scrollBar4:hover {
            background-color: rgb(199, 200, 203);
        }

        .parentDomBox .parentDom4 .scrollBar4:active {
            background-color: rgb(221, 222, 224);
            display: block;
        }

        /*点击事件所用类名*/
        .on {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="boxInput">
        <input type="text" class="input" placeholder="请选择">
        <span class="iconfont" id="icon">&#xe618;</span>
    </div>
    <div class="parentDomBox">
        <div class="parentDom1 parentULDom">
            <div class="scrollBar1 scrollBar"></div>
            <ul class="province  province1  iconfont"></ul>
        </div>
        <div class="parentDom2 parentULDom">
            <div class="scrollBar2 scrollBar"></div>
            <ul class="province  iconfont">
            </ul>
        </div>
        <div class="parentDom3 parentULDom">
            <div class="scrollBar3 scrollBar"></div>
            <ul class="province  iconfont"></ul>
        </div>

        <div class="parentDom4 parentULDom">
            <div class="scrollBar4 scrollBar">
            </div>
            <ul class="province  iconfont"></ul>
        </div>

    </div>


    <script>
        let inpBox = document.querySelector('.boxInput')
        let icon = document.querySelector('.boxInput #icon')
        let parentULDom = document.querySelector('.parentDom1 ')
        //获取每个滚动条、ul和ul的盒子
        let scrollBar = document.querySelectorAll('.parentDomBox .parentULDom .scrollBar')
        let aParentULDom = document.querySelectorAll('.parentULDom ')
        let aUl = document.querySelectorAll('.parentDomBox .parentULDom .province')
        let num = 0
        let isTop = false
        httpRequest('/area?', function (res) {

            createUIContent(res, 0)
            inpBox.onclick = function () {
                if (isTop) {
                    icon.style.transform = 'rotateZ(0deg)'
                    parentULDom.style.height = '0px'
                    parentULDom.style.display = 'none'
                    isTop = false
                } else {
                    icon.style.transform = 'rotateZ(-180deg)'
                    parentULDom.style.height = '200px'
                    parentULDom.style.display = 'block'
                    scrollBarOne(aUl[0], parentULDom, scrollBar[0])
                    isTop = true
                }
            }


        })

        //点击获取下一个内容
        //生成ul内容的数组
        function createUIContent(arr, index) {
            let li
            aUl[index].innerHTML = ''
            aUl[index].style.display = 'block'
            //为什么这里是auto
            aUl[index].style.height = getComputedStyle(aUl[index])["height"]

            for (let i = 0; i < arr.length; i++) {
                // let liArr=[]
                li = document.createElement('li')
                // liArr.push(li)
                li.innerHTML = arr[i].name + '<span>&#xe7c5;</span>'
                aUl[index].appendChild(li)
                li.addEventListener('click', () => {
                    //获取父节点所有的子节点
                    // let ali=this.parentNode.children
                    // exclusive(li,li,ali)
                    console.log('li被点击')
                    httpRequest('/area?id=' + arr[i].id, (res) => {
                        console.log(res)
                        num++
                        createUIContent(res, index + 1)
                    })
                })
            }
            console.log('li被第' + num + '次点击')
            console.log(aUl[num])
            console.log(aParentULDom[num])
            console.log(scrollBar[num])


            if (num >= 1) {
                // console.log(li.parentNode.children)
                // console.log('上面是父节点')
                // exclusive(li,li,li.parentNode.children)
                scrollBarOne(aUl[num], aParentULDom[num], scrollBar[num])
            }
        }

        //排他操作
        // function exclusive(clickDom,tabDOM,len){
        //     let n = 0
        //     for (let i = 0; i < len.length; i++) {
        //         clickDom[i].onclick = function () {
        //             //on是none
        //             tabDOM[n].classList.add('on')
        //             tabDOM[i].classList.remove('on')
        //             n = i
        //         }
        //     }
        // }


        //动画函数
        function move(dom, prop, target, time, callBack) {
            //dom：节点，prop：属性，target：
            //parseFloat用于去掉单位转换为数字
            // getComputedStyle用于获取节点属性真实值
            let init = parseFloat(getComputedStyle(dom)[prop]);
            let speed = 10 * (target - init) / time;
            let bool = target > init;
            fn()
            function fn() {
                init += speed;
                if (bool ? init >= target : init <= target) {
                    dom.style[prop] = target + 'px';
                    callBack && callBack();
                    return;
                }
                dom.style[prop] = init + 'px';
                requestAnimationFrame(fn);
            }
        }


        //请求函数
        function httpRequest(api, callBack, methods) {
            methods = methods || 'get'
            let http = new XMLHttpRequest()
            let baseURL = 'https://api.i-lynn.cn'
            //连接地址
            http.open(methods, baseURL + api)
            //发送数据
            http.send()
            http.addEventListener('readystatechange', () => {
                if (http.readyState === 4) {
                    if (http.status === 200) {
                        let arr = JSON.parse(http.response)
                        return callBack(arr)
                    }
                }
            })
        }

        //滚动条函数
        function scrollBarOne(textDom, textParentDom, dom, parentDom) {
            //如果没有滚动条的父节点，默认用文档的可视区域的节点
            //在两者父节点的高度相等的情况下不会有问题，因为一般情况会相等
            parentDom = parentDom || textParentDom
            //处理兼容
            let isChrome = document.createElement('div').onmousewheel === null
            let eventName = isChrome ? 'mousewheel' : 'DOMMouseScroll'
            //初始化
            let initY, initT, maxT, maxTc
            //求滚动条高度
            //column.offsetHeight/x = oP.offsetHeight/oBox.offsetHeight
            // let bl = textDom.offsetHeight / textParentDom.offsetHeight
            let textDomHeight = parseFloat(getComputedStyle(textDom)["height"])
            let textParentDomHeight = parseFloat(getComputedStyle(textParentDom)["height"])
            // console.log(textDom + ':' + textDomHeight)
            // console.log(textParentDom + ':' + textParentDomHeight)

            let bl = textDomHeight / textParentDomHeight

            let scrollBarH = parentDom.offsetHeight / bl
            //滚动条的长度可变
            dom.style.height = scrollBarH + 'px'
            //滚动条滑动最大值
            maxT = parentDom.offsetHeight - scrollBarH
            //文本滑动最大值
            maxTc = textDom.offsetHeight - textParentDom.offsetHeight
            //滑动的距离比例
            let bl2 = maxTc / maxT
            //鼠标按下
            dom.addEventListener('mousedown', (e) => {
                initT = dom.offsetTop//按下获取滚动条的初始位置
                initY = e.clientY//按下时获取鼠标的初始位置
                document.addEventListener('mousemove', move)
            })
            document.addEventListener('mouseup', () => {
                document.removeEventListener('mousemove', move)
            })
            // let google=e.wheelDelta / -15
            // let fireFox=e.detail / 0.5
            //滚动事件
            //每次调用重新初始化，不然会有bug，这个滚轮值会自动存储起来
            //如果滚动调用两次以上就先删除
            //document.removeEventListener(eventName,roll)

            textParentDom.addEventListener(eventName, () => {
                textParentDom.addEventListener(eventName, roll)
            })

            //滚动函数
            function roll(e) {
                e.preventDefault()//消除默认
                //wheelDelta适合edge、谷歌、WS默认
                //detail适合火狐浏览器
                let detail = isChrome ? e.wheelDelta / -15 : e.detail / 0.5
                let moveYeventName = detail + dom.offsetTop
                setScroll(moveYeventName)
            }

            //按住滑动
            function move(e) {
                let moveYon = e.clientY - initY + initT
                setScroll(moveYon)
            }

            function setScroll(moveY) {
                if (moveY < 0) moveY = 0
                if (moveY > maxT) moveY = maxT
                dom.style.top = moveY + 'px'
                textDom.style.top = -moveY * bl2 + 'px'
            }

        }


    </script>

</body>

</html>